<template>
	<view class="center">
		<view class="header">
			<image class="hleft" @click="back()" src="../../static/img/left.png" mode=""></image>
			<view class="htitle">VIP中心</view>
			<view class="hright" @click="godetail()">
				<view>VIP详情</view>
				<image src="../../static/img/right.png" mode=""></image>
			</view>
		</view>
		<view class="vip-head-bg"></view>
		<view class="vip-head">
			<view class="user-info">
				<image class="avatar" src="../../static/img/avatar.webp" mode=""></image>
				<view class="info">
					<view class="info1">
						 {{userinfo.name}} 
						<view>VIP{{userinfo.level}}</view>
					</view>
					<view class="info2">
						已加入大家庭 
						<text>{{zhijintianshu}} 天</text>
					</view>
					<view class="info2">
						保级验证时间  
						<text></text>
					</view>
				</view>
			</view>
			<view class="progressBar">
				<view class="level-c">VIP{{userinfo.level}}</view>
				<view class="progress">
					<view :style="'width:' + vipjindutiao + '%;'"></view>
				</view>
				<view class="level-c">{{nowvip.name}}</view>
			</view>
			<view class="relega-turnover">
				<view class="rttitle">保级流水</view>
				<view class="progress" style="width: 82%;">
					<view style="width: 0%;"></view>
				</view>
			</view>
			<view class="cur-level-tips">
				<view>
					 • 当前存款：
					<text class="yellow">{{vip.danqiancunkuan}}</text>
					<text class="text">（{{vip.danqiancunkuan}}/{{nowvip.cunkuan}}）</text>
				</view>
				<view>
					 • 当前流水：
					<text class="yellow">{{vip.dangqianliushui}}</text>
					<text class="text">（{{vip.dangqianliushui}}/{{nowvip.leijiliushui}}）</text>
				</view>
			</view>
		</view>
		<view class="con">
			<view class="vip-level-slider">
				<view class="vip-indicator">
					<view class="indicator">
						<view class="prev">vip{{prev}}</view>
						<view class="current">vip{{current}}</view>
						<view class="next">vip{{next}}</view>
					</view>
				</view>
				<swiper class="swipers" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true" @change="changecurrent">
					<swiper-item class="box" v-for="(item,index) in vip.vip_list">
						<view class="swiper-item">
							<image class="bg" :src="'../../static/img/vip' + item.id + '.png'" mode=""></image>
							<view class="swiper-level-info">
								<view>
									累计存款 
									<text>{{item.cunkuan}}</text>
								</view>
								<view>
									流水要求 
									<text>{{item.leijiliushui}}</text>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="vip-gift">
				<view class="gift-level">
					<view class="gift-title">VIP{{current}}尊享</view>
				</view>
				<view class="gift-box">
					<view class="gbbox">
						<image src="../../static/img/giftupgrade.png" mode=""></image>
						<view>
							<view class="text1">{{selectvip.jinjilijin}}</view>
							<view class="text2">升级礼金</view>
						</view>
					</view>
					<view class="gbbox">
						<image src="../../static/img/giftredpocket.png" mode=""></image>
						<view>
							<view class="text1">{{selectvip.meiyuelijin}}</view>
							<view class="text2">每月红包</view>
						</view>
					</view>
				</view>
			</view>
			<view class="to-detail" @click="godetail()">
				<view>查看VIP详情</view>
				<image src="../../static/img/right.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { getuserinfo,viplist } from '../../api/api.js'
	export default{
		data(){
			return{
				prev:3,
				current:1,
				next:2,
				
				userinfo:[],
				vip:[],
				nowvip:[],
				
				zhijintianshu:0,
				selectvip:[],
				
				vipjindutiao:0
			}
		},
		onLoad() {
			if(uni.getStorageSync('token')){
				this.getuserinfo()
			}
		},
		methods:{
			getuserinfo(){
				getuserinfo().then(res => {
					if(res.data.status.errorCode == 0){
						this.userinfo = res.data.data.member
						this.jisuan(this.userinfo.created_at)
						this.getviplist()
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getviplist(){
				viplist().then(res => {
					if(res.data.status.errorCode == 0){
						this.vip = res.data.data
						this.selectvip = this.vip.vip_list[0]
						for(let i = 0;i < this.vip.vip_list.length;i++){
							if(this.vip.vip_list[i].id == this.userinfo.level + 1){
								this.nowvip = this.vip.vip_list[i]
							}
						}
						let cunkuanjindu = 0
						if(this.vip.danqiancunkuan >= this.nowvip.cunkuan){
							cunkuanjindu = 50;
						}else{
							cunkuanjindu = Math.floor((this.vip.danqiancunkuan / this.nowvip.cunkuan) * 50)
						}
						let liushuijindu = 0
						if(this.vip.dangqianliushui >= this.nowvip.leijiliushui){
							liushuijindu = 50;
						}else{
							liushuijindu = Math.floor((this.vip.dangqianliushui / this.nowvip.leijiliushui) * 50)
						}
						this.vipjindutiao = cunkuanjindu + liushuijindu
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			jisuan(e){
				var date1 = e;  //开始时间
				var date2 = new Date();    //结束时间
				var date3 = date2.getTime() - new Date(date1).getTime();   //时间差的毫秒数    
				//计算出相差天数
				var days = Math.ceil(date3/(24*3600*1000))
				this.zhijintianshu = days
			},
			changecurrent(e){
				this.current = e.detail.current + 1
				if(this.current == 1){
					this.prev = 10
				}else{
					this.prev = this.current - 1
				}
				if(this.current == 10){
					this.next = 1
				}else{
					this.next = this.current + 1
				}
				
				for(let i = 0;i < this.vip.vip_list.length;i++){
					if(this.vip.vip_list[i].id == this.current){
						this.selectvip = this.vip.vip_list[i]
					}
				}
			},
			godetail(){
				uni.navigateTo({
					url:'/pages/vip/detail'
				})
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	*{
		box-sizing: border-box;
	}
	.center{
		display: flex;
		flex-direction: column;
		background-color: #212125;
		min-height: 100vh;
		position: relative;
	}
	.header{
		background: transparent;
		position: relative;
		z-index: 1;
		height: 92rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
	}
	.hleft{
		width: 22rpx;
		height: 22rpx;
		margin-right: 88rpx;
	}
	.htitle{
		font-weight: 700;
		font-size: 30rpx;
		color: #fff;
	}
	.hright{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.hright view{
		font-size: 24rpx;
		color: #9ba6b3;
		margin-right: 6rpx;
	}
	.hright image{
		width: 20rpx;
		height: 20rpx;
	}
	.vip-head-bg{
		position: absolute;
		top: 0;
		width: 100%;
		height: 476rpx;
		background: url('/static/img/vipheadbg.png') no-repeat center -60rpx;
		background-size: cover;
	}
	.vip-head{
		width: 95%;
		margin: 0 auto;
		position: relative;
	}
	.user-info{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 50rpx 0 54rpx 30rpx;
	}
	.avatar{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.info{
		padding-left: 22rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
		color: #fff;
	}
	.info1{
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 30rpx;
		margin-bottom: 8rpx;
	}
	.info1 view{
		width: 104rpx;
		height: 32rpx;
		padding-right: 8rpx;
		margin-left: 16rpx;
		font-size: 24rpx;
		background: url('../../static/img/vip.png') no-repeat 50%;
		background-size: cover;
		font-weight: 700;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.info2{
		font-weight: 400;
		color: #97a6b4;
		font-size: 24rpx;
		line-height: 36rpx;
	}
	.info2 text{
		color: #fff;
	}
	.progressBar{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.level-c{
		width: 96rpx;
		height: 32rpx;
		background: url('../../static/img/vip.png') no-repeat 50%;
		background-size: cover;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-weight: 700;
		font-size: 24rpx;
		padding-right: 8rpx;
		color: #fff;
	}
	.progress{
		width: 68%;
		position: relative;
		border-radius: 8rpx;
		background: rgba(217, 217, 217, 0.2);
		height: 14rpx;
	}
	.progress view{
		position: absolute;
		left: 0;
		height: 100%;
		background: #1989fa;
		border-radius: inherit;
	}
	.relega-turnover{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
	}
	.rttitle{
		width: 110rpx;
		height: 44rpx;
		border-radius: 6rpx;
		background: #24262a;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #fff;
	}
	.cur-level-tips{
		margin-top: 26rpx;
		font-size: 22rpx;
		color: #fff;
	}
	.cur-level-tips view{
		line-height: 48rpx;
	}
	.yellow{
		color: #ffca01;
		font-size: 24rpx;
		font-weight: 700;
	}
	.text{
		font-size: 24rpx;
		font-weight: 700;
	}
	.con{
		position: relative;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
	}
	.vip-level-slider{
		width: 100%;
		margin-top: 48rpx;
	}
	.vip-indicator{
		width: 100%;
		height: 92rpx;
		margin-bottom: 52rpx;
		background: url('/static/img/viplevlebg.png') no-repeat 50%;
		background-size: contain;
	}
	.indicator{
		height: 140rpx;
		padding: 50rpx 30rpx 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.prev,.next{
		color: #9ba6b3;
		font-size: 22rpx;
	}
	.current{
		width: 86rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		font-weight: 700;
		color: #fff;
		align-self: flex-end;
		background: #24262a;
		border-radius: 6rpx;
		font-size: 22rpx;
	}
	.swipers{
		height: 286rpx;
	}
	.box{
		width: 660rpx !important;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.swiper-item{
		width: 660rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.swiper-item .bg{
		width: 630rpx;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%);
	}
	.swiper-level-info{
		width: 100%;
		padding: 0 64rpx 0 72rpx;
		min-height: 60rpx;
		align-self: flex-end;
		position: relative;
		font-size: 24rpx;
		color: #9ba6b3;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.swiper-level-info view text{
		font-weight: 700;
		font-size: 26rpx;
		color: #fff;
	}
	.vip-gift{
		width: 95%;
		margin-top: 66rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.gift-level{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.gift-title{
		font-size: 32rpx;
		color: #fff;
		font-weight: 700;
		margin: 0 26rpx;
	}
	.gift-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 36rpx;
	}
	.gbbox{
		width: 340rpx;
		height: 140rpx;
		background: #24262a;
		border-radius: 6rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.gbbox image{
		width: 108rpx;
		height: 112rpx;
	}
	.gbbox>view{
		padding-left: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.text1{
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
	}
	.text2{
		font-size: 24rpx;
		color: #9ba6b3;
	}
	.to-detail{
		font-size: 24rpx;
		color: #9ba6b3;
		margin: 88rpx 0 40rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.to-detail image{
		width: 22rpx;
		height: 22rpx;
		margin-left: 8rpx;
	}
</style>